<template>
  <div>
    <!-- 面包屑导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>Amazon基础信息</el-breadcrumb-item>
      <el-breadcrumb-item>PN基础资料维护</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-row>
        <el-col :span='7'>
          <el-autocomplete class="inline-input"
                           v-model="queryInfo.query"
                           :fetch-suggestions="querySearchPNBySelf"
                           placeholder="请输入料号"
                           @select="handleSelect"
                           :clearable='true'
                           @clear='getPartNoList'>
            <el-button slot="append"
                       icon="el-icon-search"
                       @click='getPartNoList'></el-button>
          </el-autocomplete>
        </el-col>
        <el-col :span="4">
          <el-button type="primary"
                     @click='addPartNoExtendInfo'>添加料号信息</el-button>
        </el-col>
      </el-row>

      <!--PN列表区域-->
      <el-table :data="PartNoExtendList"
                :border="true"
                :stripe="true"
                :header-cell-style="{'text-align':'center','font-weight':'700','color':'#606266'}"
                :cell-style="{'text-align':'center'}">
        <el-table-column fixed
                         width='50'
                         type="index"></el-table-column>
        <el-table-column fixed
                         width='100'
                         label="料号"
                         prop="PART_NO"></el-table-column>
        <el-table-column width='100'
                         label="运输方式"
                         prop="RANS_MODE"></el-table-column>
        <el-table-column width='100'
                         label="卡通长度"
                         prop="CARTON_LENGTH"></el-table-column>
        <el-table-column width='100'
                         label="卡通宽度"
                         prop="CARTON_WIDTH"></el-table-column>
        <el-table-column width='100'
                         label="卡通高度"
                         prop="CARTON_HEIGHT"></el-table-column>
        <el-table-column width='100'
                         label="卡通净重"
                         prop="CARTON_NW"></el-table-column>
        <el-table-column width='100'
                         label="卡通毛重"
                         prop="CARTON_GW"></el-table-column>
        <el-table-column width='80'
                         label="卡通重量单位"
                         prop="CARTON_WEIGHT_UNIT"></el-table-column>
        <el-table-column width='80'
                         label="卡通容积"
                         prop="CARTON_VOLUME_UNIT"></el-table-column>
        <el-table-column width='230'
                         label="栈板长度"
                         prop="PALLET_LENGTH"></el-table-column>
        <el-table-column width='150'
                         label="栈板宽度"
                         prop="PALLET_WIDTH"></el-table-column>
        <el-table-column width='150'
                         label="栈板高度"
                         prop="PALLET_HEIGHT"></el-table-column>
        <el-table-column width='150'
                         label="栈板净重"
                         prop="PALLET_NW"></el-table-column>
        <el-table-column width='150'
                         label="栈板毛重"
                         prop="PALLET_GW"></el-table-column>
        <el-table-column width='150'
                         label="栈板重量单位"
                         prop="PALLET_WEIGHT_UNIT"></el-table-column>
        <el-table-column width='150'
                         label="栈板容积"
                         prop="PALLET_VOLUME_UNIT"></el-table-column>
        <el-table-column width='150'
                         label="栈板材质">
          <template slot-scope="scope">
            <el-tag :key='scope.row.PALLET_MAT_CODE'
                    :type='success'
                    effort='dark'
                    v-if="scope.row.PALLET_MAT_CODE==='4'">
              Standard
            </el-tag>
            <el-tag :key='scope.row.PALLET_MAT_CODE'
                    :type='success'
                    effort='dark'
                    v-else-if="scope.row.PALLET_MAT_CODE==='6'">
              Wood
            </el-tag>
            <el-tag :key='scope.row.PALLET_MAT_CODE'
                    :type='success'
                    effort='dark'
                    v-else-if="scope.row.PALLET_MAT_CODE==='8'">
              Foam
            </el-tag>
            <el-tag :key='scope.row.PALLET_MAT_CODE'
                    :type='success'
                    effort='dark'
                    v-else>
              UnKnow
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         width="180px;">
          <template slot-scope="scope">
            <!--修改-->
            <el-tooltip content="修改料号"
                        placement="bottom"
                        effect="light"
                        :enterable="false">
              <el-button type="primary"
                         icon="el-icon-edit"
                         size="mini"
                         @click='editPartNo(scope.row)'>
              </el-button>
            </el-tooltip>
            <!--删除-->
            <el-tooltip content="删除料号"
                        placement="bottom"
                        effect="light"
                        :enterable="false">
              <el-button type="danger"
                         icon="el-icon-delete"
                         size="mini"
                         @click="deletePartNo(scope.row)">
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="queryInfo.pagenum"
                     :page-sizes="[1, 2, 5, 10]"
                     :page-size="queryInfo.pagesize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"
                     background>
      </el-pagination>
    </el-card>

    <!-- 新增料号其他信息-->
    <el-dialog title='添加料号扩展信息'
               :visible.sync="addDialogVisible"
               width="80%"
               @closed='addPartNoFormClosed'
               :close-on-click-modal='false'>
      <!--内容主体区-->
      <el-form :model="addPartNoForm"
               :rules="addPartNoFormRules"
               ref="addPartNoFormRef"
               label-width='100px'>
        <el-row type='flex'>
          <el-col :span='11'>
            <el-form-item label='料号'
                          label-width="150px"
                          prop='PART_NO'>
              <el-input placeholder='请输入料号'
                        v-model='addPartNoForm.PART_NO'
                        @blur="searchCartonSpecByPartNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span='2'></el-col>
          <el-col :span='11'>
            <el-form-item label='运输方式'
                          label-width="150px"
                          prop='RANS_MODE'>
              <el-select v-model='addPartNoForm.RANS_MODE'
                         placeholder='请选择运输方式'
                         style="width: 100%;">
                <el-option v-for="item in delivery_option"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <fieldset class="elem-field">
          <legend>Carton信息</legend>
          <el-row type='flex'>
            <el-col :span='11'>
              <el-form-item label='卡通长度'
                            label-width="150px"
                            prop='CARTON_LENGTH'>
                <el-input placeholder='请输入Carton长度'
                          v-model='addPartNoForm.CARTON_LENGTH'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span='2'></el-col>
            <el-col :span='11'>
              <el-form-item label='卡通宽度'
                            label-width="150px"
                            prop='CARTON_WIDTH'>
                <el-input placeholder='请输入CARTON宽度'
                          v-model='addPartNoForm.CARTON_WIDTH'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type='flex'>
            <el-col :span='11'>
              <el-form-item label='卡通高度'
                            label-width="150px"
                            prop='CARTON_HEIGHT'>
                <el-input placeholder='请输入CARTON高度'
                          v-model='addPartNoForm.CARTON_HEIGHT'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span='2'></el-col>
            <el-col :span='11'>
              <el-form-item label='卡通净重'
                            label-width="150px"
                            prop='CARTON_NW'>
                <el-input placeholder='请输入Carton Net Weight'
                          v-model='addPartNoForm.CARTON_NW'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type='flex'>
            <el-col :span='11'>
              <el-form-item label='卡通毛重'
                            label-width="150px"
                            prop='CARTON_GW'>
                <el-input placeholder='请输入Carton Gross Weight'
                          v-model='addPartNoForm.CARTON_GW'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span='2'></el-col>
            <el-col :span='11'>
              <el-form-item label='卡通重量单位'
                            label-width="150px">
                <el-input placeholder='请输入Carton Weight Unit'
                          v-model='addPartNoForm.CARTON_WEIGHT_UNIT'>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type='flex'>
            <el-col :span='11'>
              <el-form-item label='卡通容量单位'
                            label-width="150px">
                <el-input placeholder='请输入Carton Volume Unit'
                          v-model='addPartNoForm.CARTON_VOLUME_UNIT'>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span='2'></el-col>
          </el-row>
        </fieldset>
        <fieldset class="elem-field">
          <legend>Pallet信息</legend>
          <el-row type='flex'>
            <el-col :span='11'>
              <el-form-item label='栈板长度'
                            label-width="150px"
                            prop='PALLET_LENGTH'>
                <el-input placeholder='请输入Pallet Length'
                          v-model='addPartNoForm.PALLET_LENGTH'>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span='2'></el-col>
            <el-col :span='11'>
              <el-form-item label='栈板宽度'
                            label-width="150px"
                            prop='PALLET_WIDTH'>
                <el-input placeholder='请输入Pallet Width'
                          v-model='addPartNoForm.PALLET_WIDTH'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type='flex'>
            <el-col :span='11'>
              <el-form-item label='栈板高度'
                            label-width="150px"
                            prop='PALLET_HEIGHT'>
                <el-input placeholder='请输入Pallet Height'
                          v-model='addPartNoForm.PALLET_HEIGHT'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span='2'></el-col>
            <el-col :span='11'>
              <el-form-item label='栈板净重'
                            label-width="150px"
                            prop='PALLET_NW'>
                <el-input placeholder='请输入Pallet Net Weight'
                          v-model='addPartNoForm.PALLET_NW'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type='flex'>
            <el-col :span='11'>
              <el-form-item label='栈板毛重'
                            label-width="150px"
                            prop='PALLET_GW'>
                <el-input placeholder='请输入Pallet Gross Weight'
                          v-model='addPartNoForm.PALLET_GW'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span='2'></el-col>
            <el-col :span='11'>
              <el-form-item label='栈板重量单位'
                            label-width="150px"
                            prop='PALLET_WEIGHT_UNIT'>
                <el-input placeholder='请输入Pallet Weight Unit'
                          v-model='addPartNoForm.PALLET_WEIGHT_UNIT'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type='flex'>
            <el-col :span='11'>
              <el-form-item label='栈板容量单位'
                            label-width="150px"
                            prop='PALLET_VOLUME_UNIT'>
                <el-input placeholder='请输入Pallet Volume Unit'
                          v-model='addPartNoForm.PALLET_VOLUME_UNIT'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span='2'></el-col>
            <el-col :span='11'>
              <el-form-item label='栈板材质'
                            label-width="150px"
                            prop='PALLET_MAT_CODE'>
                <el-select v-model='addPartNoForm.PALLET_MAT_CODE'
                           placeholder='请选择栈板材质'
                           style="width: 100%;">
                  <el-option v-for="item in palletMaterial_option"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
                <!-- <el-input placeholder='请输入Pallet Volume Unit' v-model='addPartNoForm.PALLET_MAT_CODE'></el-input> -->
              </el-form-item>
            </el-col>
          </el-row>
        </fieldset>
      </el-form>
      <!--底部区-->
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click='addPartNoContent'>确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    const validateNumber = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('不能为空'))
      } else if (!(/^[0-9]*([.][0-9]+)?$/.test(value))) {
        callback(new Error('请输入正确的数字或者小数'))
      } else {
        callback()
      }
    }
    return {
      addDialogVisible: false, // 控制是否显示新增料号的dialog
      partnoInfoFromDB: [], // 从越南库中获取到的PN信息
      PartNoExtendList: [], // 查询出来的现存信息
      total: 0, // 记录总数
      success: '',
      // 运输方式
      delivery_option: [{
        value: 'Air',
        label: 'Air'
      },
      {
        value: 'Ocean',
        label: 'Ocean'
      },
      {
        value: 'Road',
        label: 'Road'
      },
      {
        value: 'SeaAir',
        label: 'SeaAir'
      }
      ],
      // 栈板材质
      palletMaterial_option: [{
        value: '4',
        label: 'Standard'
      }, {
        value: '6',
        label: 'Wood'
      }, {
        value: '8',
        label: 'Foam'
      }],
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      addPartNoForm: {
        PART_NO: '',
        RANS_MODE: '',
        CARTON_LENGTH: '',
        CARTON_WIDTH: '',
        CARTON_HEIGHT: '',
        CARTON_NW: '',
        CARTON_GW: '',
        CARTON_WEIGHT_UNIT: 'KG',
        CARTON_VOLUME_UNIT: 'IN',
        PALLET_LENGTH: '1219',
        PALLET_WIDTH: '1016',
        PALLET_HEIGHT: '',
        PALLET_NW: '',
        PALLET_GW: '',
        PALLET_WEIGHT_UNIT: 'KG',
        PALLET_VOLUME_UNIT: 'IN',
        PALLET_MAT_CODE: ''
      },
      addPartNoFormRules: {
        PART_NO: [{
          required: true,
          message: '请输入料号',
          trigger: 'blur'
        }],
        RANS_MODE: [{
          required: true,
          message: '请选择运输方式',
          trigger: 'blur'
        }],
        CARTON_LENGTH: [{
          validator: validateNumber,
          trigger: 'blur'
        }],
        CARTON_WIDTH: [{
          validator: validateNumber,
          trigger: 'blur'
        }],
        CARTON_HEIGHT: [{
          validator: validateNumber,
          trigger: 'blur'
        }],
        CARTON_NW: [{
          validator: validateNumber,
          trigger: 'blur'
        }],
        CARTON_GW: [{
          validator: validateNumber,
          trigger: 'blur'
        }],
        CARTON_WEIGHT_UNIT: [{
          required: true,
          message: 'Carton重量单位不能为空',
          trigger: 'blur'
        }],
        CARTON_VOLUME_UNIT: [{
          required: true,
          message: 'Carton容量单位不能为空',
          trigger: 'blur'
        }],
        PALLET_LENGTH: [{
          validator: validateNumber,
          trigger: 'blur'
        }],
        PALLET_WIDTH: [{
          validator: validateNumber,
          trigger: 'blur'
        }],
        PALLET_HEIGHT: [{
          validator: validateNumber,
          trigger: 'blur'
        }],
        PALLET_NW: [{
          validator: validateNumber,
          trigger: 'blur'
        }],
        PALLET_GW: [{
          validator: validateNumber,
          trigger: 'blur'
        }],
        PALLET_WEIGHT_UNIT: [{
          required: true,
          message: 'Pallet重量单位不能为空',
          trigger: 'blur'
        }],
        PALLET_VOLUME_UNIT: [{
          required: true,
          message: 'Pallet容量单位不能为空',
          trigger: 'blur'
        }],
        PALLET_MAT_CODE: [{
          required: true,
          message: 'Pallet材质不能为空',
          trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    async loadExistsPNBySelf () {
      const {
        data: res
      } = await this.$http.get('/Amazon/AmazonBaseInfo/SearchPartNoListFromMES')
      if (res.meta.status !== 200) {
        return this.$message.error('从越南库中获取料号信息失败')
      }
      this.partnoInfoFromDB = res.data
    },
    querySearchPNBySelf (queryString, cb) {
      var partnoInfoDBList = this.partnoInfoFromDB
      var currentPartNoListDB = []
      for (let index = 0; index < partnoInfoDBList.length; index++) {
        const item = {}
        item.value = partnoInfoDBList[index].PART_NO
        currentPartNoListDB.push(item)
      }
      console.log(currentPartNoListDB)
      var results =
        queryString ? currentPartNoListDB.filter(this.createStateFilter(queryString)) : currentPartNoListDB
      cb(results)
    },
    createStateFilter (queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    async searchCartonSpecByPartNo (partno) {
      console.log(this.addPartNoForm.PART_NO)
      if (this.addPartNoForm.PART_NO !== '') {
        // 根据料号从后台查询CARTON的规格
        const { data: res } = await
          this.$http.post('/Amazon/AmazonBaseInfo/SearchCartonSpecByPartNo', this.addPartNoForm)
        if (res.meta.status !== 200) {
          return this.$message.error('CARTON查询失败,请手动维护')
        }
        console.log(res.data)
        if (res.data.length !== 0) {
          this.addPartNoForm.CARTON_LENGTH = res.data[0].CARTON_LENGTH
          this.addPartNoForm.CARTON_WIDTH = res.data[0].CARTON_WIDTH
          this.addPartNoForm.CARTON_HEIGHT = res.data[0].CARTON_HEIGHT
          this.addPartNoForm.CARTON_NW = res.data[0].NET_WEIGHT
        }
      }
    },
    handleSelect (item) {
      // console.log(item)
    },
    async getPartNoList () {
      const {
        data: res
      } = await
          this.$http.post('/Amazon/AmazonBaseInfo/SearchPartNoExtendList', this.queryInfo)
      if (res.meta.status !== 200) {
        return this.$message.error('获取料号列表失败')
      }
      // this.$message.success('获取料号列表成功')
      this.PartNoExtendList = res.data.partNoList
      console.log(this.PartNoExtendList)
      console.log(this.success)
      this.total = res.data.total
    },
    // 监听pageSize改变的事件
    handleSizeChange (val) {
      this.queryInfo.pagesize = val
      this.getPartNoList()
      console.log(`每页 ${val} 条`)
    },
    // 监听页码值改变事件
    handleCurrentChange (val) {
      this.queryInfo.pagenum = val
      this.getPartNoList()
      console.log(`当前页: ${val}`)
    },
    // 新增料号扩展信息
    addPartNoExtendInfo () {
      this.addDialogVisible = true
    },
    // 关闭新增料号dialog事件
    addPartNoFormClosed () {
      console.log('execute close event')
      this.$refs.addPartNoFormRef.resetFields()
    },
    // 添加料号新增信息
    addPartNoContent () {
      this.$refs.addPartNoFormRef.validate(async valid => {
        if (!valid) {
          return
        }
        const {
          data: res
        } = await this.$http.post('/Amazon/AmazonBaseInfo/InsertAmazonPartNoBaseInfo', this.addPartNoForm)
        if (res.meta.status !== 200) {
          // 添加料号扩展信息失败
          return this.$message.error('添加料号扩展信息失败')
        }
        this.$message.success('添加料号扩展信息成功')
        this.addDialogVisible = false
        this.getPartNoList()
      })
    },
    editPartNo (obj) {
      this.$message({
        message: `${obj.PART_NO} 修改功能暂时还没有开发`,
        type: 'warning'
      })
    },
    deletePartNo (obj) {
      this.$confirm('此操作将永久删除该料号, 是否继续?', '提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(async () => {
        const {
          data: res
        } = await
            this.$http.delete('/Amazon/AmazonBaseInfo/DeletePartNoInfo', {
              params: {
                PART_NO: obj.PART_NO,
                Delivery_Method: obj.RANS_MODE
              }
            })
        if (res.meta.status !== 200) {
          this.$message.error('删除料号数据失败')
          return
        }
        // 更新用户列表
        this.$message.success('删除料号数据成功')
        this.getPartNoList()
      }).catch(() => {
        this.$message.info('取消删除')
      })
    }
  },
  created () {
    this.loadExistsPNBySelf()
    this.getPartNoList()
  }
}

</script>
<style lang="less" scoped>
.elem-field {
  margin-bottom: 10px;
  padding: 0;
  border-width: 1px;
  border-style: none;
  border-top-style: solid;
  border-color: #e6e6e6;
}

.elem-field legend {
  margin: 0 20px;
  padding: 0 10px;
  font-size: 14px;
  text-align: left;
  font-weight: 300;
  border-bottom: none;
  width: auto;
}
</style>
